<template>
  <div class="container">
  <el-row :gutter="24" style="height: 100%">
    <el-col :span="8" style="padding-right: 10px;">
      <el-card class="box-card">
        <div class="user">
          <img src="../../assets/avatar.png" alt="">
          <div class="userinfo">
            <p class="name">{{user.name}}</p>
            <p class="access">{{user.role}}</p>
          </div>
        </div>
        <div class="login-info">
          <p>工号：<span>{{user.username}}</span></p>
          <p>岗位：<span>{{ user.post }}</span></p>
          <p>类别：<span>{{ user.persontype }}</span></p>
          <p>部门：<span>{{ user.dept }}</span></p>
        </div>
      </el-card>
      <el-card style="margin-top: 20px">
        <el-table
            :data="tableData"
            height="230px"
            :default-sort = "{prop: 'month', order: 'descending'}"
            style="width: 100%">
          <el-table-column
              v-for="(val,key) in tableLabel"
              :prop="key"
              :label="val"
              align="center"
              sortable
          >
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="padding-left: 10px;">
      <div class="num">
        <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background:item.color}"></i>
          <div class="detail">
            <p class="desc">{{item.holidaytype__name}}</p>
            <p class="price">{{item.total_days}}</p>
          </div>
        </el-card>
      </div>

       <el-card >
         <!--折线图-->
         <div ref="echarts1" style="height: 370px;width: 100%"></div>
       </el-card>


<!--      <div class="graph">-->
<!--        <el-card>-->
<!--          <div ref="echarts2"></div>-->
<!--        </el-card>-->
<!--        <el-card>-->
<!--          <div ref="echarts3"></div>-->
<!--        </el-card>-->
<!--      </div>-->
    </el-col>
  </el-row>
  </div>
</template>

<script>
import {holidaySelectByUser} from "@/utils/statistic";

export default {
  name: "Home",
  data(){
    return {
      user:JSON.parse(localStorage.getItem('user') || '{}'),
      tableData:[],
      tableLabel:{
        month:'月份',
        holidaytype__name:'请假类型',
        total_days:'天数'
      },
      countData:[
        {
          holidaytype__name:"婚假",
          total_days:'0天',
          icon:"sugar",
          color:"red"
        },
        {
          holidaytype__name:"年休假",
          total_days:'0天',
          icon:"sunny",
          color:"#2ec7c9"
        },
        {
          holidaytype__name:"病假",
          total_days:'0天',
          icon:"user",
          color:"#ffb980"
        },
        {
          holidaytype__name:"产假",
          total_days:'0天',
          icon:"food",
          color:"purple"
        },
        {
          holidaytype__name:"事假",
          total_days:'0天',
          icon:"date",
          color:"#666"
        },
        {
          holidaytype__name:"育儿假",
          total_days:'0天',
          icon:"ship",
          color:"#5ab1ef"
        }
      ],
      statisticData:[]
    }
  },
  created() {
     // this.init()

  },
  mounted() {
    this.getEchartData()
  },
  methods:{
    // init(){
    //   holidaySelectByUser({}).then(res =>{
    //     if(res.code === "1"){
    //       console.log(res)
    //       this.tableData=res.user_month_holidaytype
    //       console.log('tableData',this.tableData)
    //       for(let i=0;i<res.user_holidaytype.length;i++){
    //         for(let j=0;j<this.countData.length;j++){
    //           if(this.countData[j].holidaytype__name==res.user_holidaytype[i].holidaytype__name){
    //             this.countData[j].total_days = res.user_holidaytype[i].total_days+'天'
    //           }
    //         }
    //       }
    //     }else {
    //       this.$message.error(res.message)
    //     }
    //   })
    // },

    //折线图
    // async getEchartData(){
    //  await holidaySelectByUser({}).then(res =>{
    //     if(res.code === "1"){
    //       console.log(res)
    //       this.tableData=res.user_month_holidaytype
    //       console.log('tableData',this.tableData)
    //       for(let i=0;i<res.user_holidaytype.length;i++){
    //         for(let j=0;j<this.countData.length;j++){
    //           if(this.countData[j].holidaytype__name==res.user_holidaytype[i].holidaytype__name){
    //             this.countData[j].total_days = res.user_holidaytype[i].total_days+'天'
    //           }
    //         }
    //       }
    //     }else {
    //       this.$message.error(res.message)
    //     }
    //   })
    //   console.log('tableData222',this.tableData)
    //   let temp1=[]
    //   for(let i=0;i<this.tableData.length;i++){
    //         temp1.push(this.tableData[i].holidaytype__name)
    //       }
    //   console.log('temp1',temp1)
    //
    //   let temp2=[]
    //   for(let i=0;i<this.tableData.length;i++){
    //     temp2.push(this.tableData[i].month)
    //   }
    //   console.log('temp2',temp2)
    //
    //   let temp3 =[
    //     {
    //       name:'',
    //       type:'',
    //       stack:'',
    //       data:[]
    //     }
    //   ]
    //   for(let i=0;i<this.tableData.length;i++){
    //     temp3[i].name =this.tableData[i].holidaytype__name
    //     temp3[i].type ='line'
    //     temp3[i].stack = 'Total'
    //     temp3[i].data.push(this.tableData[i].total_days)
    //   }
    //   console.log('temp3',temp3)
    //
    //   //绘制折线图
    //   const chart = this.$refs.echarts1
    //   if(chart){
    //     const myChart = this.$echarts.init(chart)
    //     const option = {
    //       title:{
    //         text:'各月请假情况'
    //       },
    //       legend:{
    //         data:temp1
    //       },
    //       tooltip:{
    //         trigger:'axis'
    //       },
    //       grid: {
    //         left: '20px',
    //         right: '20px',
    //         bottom: '20px',
    //         // containLabel: true
    //       },
    //       toolbox: {
    //         feature: {
    //           saveAsImage: {}
    //         }
    //       },
    //       xAxis: {
    //         type: 'category',
    //         boundaryGap: false,
    //         data: temp2
    //       },
    //       yAxis: {
    //         type: 'value'
    //       },
    //       series: temp3
    //     }
    //     myChart.setOption(option)
    //     window.addEventListener("resize", function() {
    //       myChart.resize()
    //     })
    //   }
    //   this.$on('hook:destroyed',()=>{
    //     window.removeEventListener("resize", function() {
    //       myChart.resize();
    //     });
    //   })
    // },

    //饼图
    async getEchartData(){
      await holidaySelectByUser({}).then(res =>{
        if(res.code === "1"){
          console.log(res)
          this.tableData=res.user_month_holidaytype
          this.statisticData = res.user_holidaytype
          console.log('tableData',this.tableData)
          for(let i=0;i<res.user_holidaytype.length;i++){
            for(let j=0;j<this.countData.length;j++){
              if(this.countData[j].holidaytype__name==res.user_holidaytype[i].holidaytype__name){
                this.countData[j].total_days = res.user_holidaytype[i].total_days+'天'
              }
            }
          }
        }else {
          this.$message.error(res.message)
        }
      })

      let temp1=[]
        for(let i=0;i<this.statisticData.length;i++){
              temp1.push(this.statisticData[i].holidaytype__name)
            }
        console.log('temp1',temp1)
      let temp3 =[
        {
          name:'',
          value:''
        }
      ]
      for(let i=0;i<this.statisticData.length;i++){
        temp3[i].name =this.statisticData[i].holidaytype__name
        temp3[i].value =this.statisticData[i].total_days
      }
      console.log('temp3',temp3)

      //绘制折线图
      const chart = this.$refs.echarts1
      if(chart){
        const myChart = this.$echarts.init(chart)
        const option = {
          title:{
            text:'休假天数',
            subtext:'类型比例',
            x:'center'
          },
          legend:{
            orient: 'vertical',
            left: 'left',
            data:temp1
          },
          tooltip:{
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series : [
            {
              name: '请假类型',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:temp3,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 80vh;
  .user{
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    display:flex;
    align-items: center;
    img{
      margin-right: 40px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
    }
    .userinfo{
      .name{
        font-size: 32px;
        margin-bottom: 10px;
      }
      .access{
        color: #999999;
      }
    }
  }
  .login-info{
    margin-left: 20%;
    p{
      line-height: 28px;
      font-size: 14px;
      color: #999999;
      span{
        text-align: center;
        color: #666666;
        margin-left: 60px;
      }
    }
  }
  .num{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .icon{
      width: 80px;
      height: 80px;
      font-size: 30px;
      text-align: center;
      line-height: 80px;
      color: #fff;
    }
    .detail{
      margin-left: 30%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .price{
        color: #999;
        font-size: 30px;
        margin-top: 5px;
        line-height: 30px;
        height: 30px;
      }
      .desc{
        color: #000c17;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
      }
    }
    .el-card{
      width: 32%;
      margin-bottom: 20px;
    }
  }
  .graph{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .el-card{
      width: 48%;
    }
  }
}

</style>
